<template>
	<view class="pageview"></view>
</template>

<script>
	// #ifdef APP-PLUS
	// 如下为分享内容定义，可根据业务需求自行定义
	var strShareUrl = "https://uniapp.dcloud.io"
	var strShareTitle = "跨端神器uni-app，开发一次，App、小程序、H5全覆盖"
	var strShareSummary = "iOS、Android、H5、微信/支付宝/百度小程序，一套代码全覆盖"
	var strShareImageUrl = "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"
	
	//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
	var screenWidth = plus.screen.resolutionWidth
	//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
	//图标下的按钮文字距离图标5像素，文字大小12像素
	//底部取消按钮高度固定为44px
	//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
	var margin = 25,
		iconWidth = 55,
		icontextSpace = 5,
		textHeight = 12
	var left1 = margin / 360 * screenWidth
	var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
	if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
		margin = 15
		iconWidth = 40
		left1 = margin / 360 * screenWidth
		iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
	}
	var left2 = left1 + iconWidth + iconSpace
	var left3 = left1 + (iconWidth + iconSpace) * 2
	var left4 = left1 + (iconWidth + iconSpace) * 3
	var top1 = left1
	var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
	var nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
		top: '0px',
		left: '0px',
		height: '100%',
		width: '100%',
		backgroundColor: 'rgba(0,0,0,0.2)'
	});
	nvMask.addEventListener("click", function() { //处理遮罩层点击
		nvMask.hide();
		nvImageMenu.hide();
	})
	var nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
		bottom: '0px',
		left: '0px',
		height: '264px',
		width: '100%',
		backgroundColor: 'rgb(255,255,255)'
	});
	//绘制底部图标菜单的内容
	nvImageMenu.draw([
		{
			tag: 'rect',//菜单顶部的分割灰线
			color: '#e7e7e7',
			position: {
				top: '0px',
				height: '1px'
			}
		},
		{
			tag: 'font',
			id: 'sharecancel',//底部取消按钮的文字
			text: '取消',
			textStyles: {
				size: '14px'
			},
			position: {
				bottom: '0px',
				height: '44px'
			}
		},
		{
			tag: 'rect',//底部取消按钮的顶部边线
			color: '#e7e7e7',
			position: {
				bottom: '45px',
				height: '1px'
			}
		},
		// {
		// 	tag: 'img',
		// 	id: 'imgwechatfriend',
		// 	src: '/static/logo.png',
		// 	position: {
		// 		top: top1,
		// 		left: left1,
		// 		width: iconWidth,
		// 		height: iconWidth
		// 	}
		// },
		// {
		// 	tag: 'font',
		// 	id: 'fontwechatfriend',
		// 	text: '微信好友',
		// 	textStyles: {
		// 		size: textHeight
		// 	},
		// 	position: {
		// 		top: top1 + iconWidth + icontextSpace,
		// 		left: left1,
		// 		width: iconWidth,
		// 		height: textHeight
		// 	}
		// },
		// {
		// 	tag: 'img',
		// 	id: 'imgwechatmoments',
		// 	src: '/static/logo.png',
		// 	position: {
		// 		top: top1,
		// 		left: left2,
		// 		width: iconWidth,
		// 		height: iconWidth
		// 	}
		// },
		// {
		// 	tag: 'font',
		// 	id: 'fontwechatmoments',
		// 	text: '微信朋友圈',
		// 	textStyles: {
		// 		size: textHeight
		// 	},
		// 	position: {
		// 		top: top1 + iconWidth + icontextSpace,
		// 		left: left2 - 2.5,
		// 		width: iconWidth + 5,
		// 		height: textHeight
		// 	}
		// },
		// {
		// 	tag: 'img',
		// 	id: 'imgweibo',
		// 	src: '/static/logo.png',
		// 	position: {
		// 		top: top1,
		// 		left: left3,
		// 		width: iconWidth,
		// 		height: iconWidth
		// 	}
		// },
		// {
		// 	tag: 'font',
		// 	id: 'fontweibo',
		// 	text: '微博',
		// 	textStyles: {
		// 		size: textHeight
		// 	},
		// 	position: {
		// 		top: top1 + iconWidth + icontextSpace,
		// 		left: left3,
		// 		width: iconWidth,
		// 		height: textHeight
		// 	}
		// },
		// {
		// 	tag: 'img',
		// 	id: 'imgqq',
		// 	src: '/static/logo.png',
		// 	position: {
		// 		top: top1,
		// 		left: left4,
		// 		width: iconWidth,
		// 		height: iconWidth
		// 	}
		// },
		// {
		// 	tag: 'font',
		// 	id: 'fontqq',
		// 	text: 'QQ',
		// 	textStyles: {
		// 		size: textHeight
		// 	},
		// 	position: {
		// 		top: top1 + iconWidth + icontextSpace,
		// 		left: left4,
		// 		width: iconWidth,
		// 		height: textHeight
		// 	}
		// },
		{
			tag: 'img',
			id: 'imgcopyurl',
			src: '/static/logo.png',
			position: {
				top: top1,
				left: left1,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontcopyurl',
			text: '复制',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left1,
				width: iconWidth,
				height: textHeight
			}
		},
		{
			tag: 'img',
			id: 'imgshuaxin',
			src: '/static/logo.png',
			position: {
				top: top1,
				left: left2,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontshuaxin',
			text: '刷新',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left2,
				width: iconWidth,
				height: textHeight
			}
		},
		{
			tag: 'img',
			id: 'imgshare',
			src: '/static/logo.png',
			position: {
				top: top1,
				left: left3,
				width: iconWidth,
				height: iconWidth
			}
		},
		{
			tag: 'font',
			id: 'fontshare',
			text: '分享',
			textStyles: {
				size: textHeight
			},
			position: {
				top: top1 + iconWidth + icontextSpace,
				left: left3,
				width: iconWidth,
				height: textHeight
			}
		},
		//如果想要增加更多按钮，请在这里继续添加，第二列还有2个空位
	])
	nvImageMenu.addEventListener("click", function(e) { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
		// console.log("click menu"+JSON.stringify(e));
		if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
			nvMask.hide();
			nvImageMenu.hide();
		} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
			//屏幕左右边缘5像素及菜单顶部5像素不处理点击
		} else { //点击了图标按钮
			var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
			var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
			var iCol = -1
			if (e.clientX < (left2 - (iconSpace / 2))) {
				iCol = 0
			} else if (e.clientX < (left3 - (iconSpace / 2))) {
				iCol = 1
			} else if (e.clientX < (left4 - (iconSpace / 2))) {
				iCol = 2
			} else {
				iCol = 3
			}
			if (iRow == 0) {
				iClickIndex = iCol
			} else {
				iClickIndex = iCol + 4
			}
			console.log("点击按钮的序号: " + iClickIndex);
			if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
				var strProvider="",strScene=""
				switch (iClickIndex) {
					case 0:
						uni.setClipboardData({
							data: strShareUrl,
							complete() {
								uni.showToast({
									title: "已复制到剪贴板"
								})
							}
						})
						// strProvider = "weixin"
						// strScene = "WXSceneSession"
						break;
					case 1:
						// strProvider = "weixin"
						// strScene = "WXSenceTimeline"
						break;
					case 2:
						// strProvider = "sinaweibo"
						break;
					case 3:
						// strProvider = "qq"
						break;
					case 4:
						// uni.setClipboardData({
						// 	data: strShareUrl,
						// 	complete() {
						// 		uni.showToast({
						// 			title: "已复制到剪贴板"
						// 		})
						// 	}
						// })
						break;
					case 5:
						plus.share.sendWithSystem({
							content: strShareUrl,
						})
						break;
				}
				// if (strProvider!="") { //点击了0-3序号的这4个按钮
				// 	uni.share({
				// 		provider: strProvider,
				// 		scene:strScene,
				// 		type: 0,
				// 		href: strShareUrl,
				// 		title: strShareTitle,
				// 		summary: strShareSummary,
				// 		imageUrl: strShareImageUrl,
				// 		success: function(res) {
				// 			console.log("success:" + JSON.stringify(res));
				// 		},
				// 		fail: function(err) {
				// 			console.log("fail:" + JSON.stringify(err));
				// 		}
				// 	})
				// }
			}
		}
	})
	// #endif
	let view = null;
	export default {
		data() {
			return {
				webUrl: ''
			}
		},

		onLoad() {
			let query = this.$Route.query
			this.webUrl = query.url
			this.createWeb()
			setTimeout(()=>{
				this.createBtn()
			},200)
		},
		onUnload(){
			view && view.close();
		},
		methods: {
			createWeb(){
				if(!this.webUrl)return
				this.webViewObj = plus.webview.create("", "webview", {
					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
					//'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
					// top:uni.getSystemInfoSync().statusBarHeight+93 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
					top: uni.getSystemInfoSync().statusBarHeight //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
				})
				this.webViewObj.loadURL(this.webUrl)
				// this.webViewObj.addEventListener('loading', () => {
				// 	uni.showLoading({
				// 		title: '加载中',
				// 		mask: true
				// 	});
				// }, false);
				// this.webViewObj.addEventListener('loaded', () => {
				// 	uni.hideLoading();
				// }, false);
				var currentWebview = this.$scope
					.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
				currentWebview.append(this.webViewObj); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
				
				
			},
			createBtn() {
				let sys = uni.$u.sys()
				view = new plus.nativeObj.View('capsule',{top:sys.statusBarHeight + 7 + 'px',left:sys.screenWidth - 5 - 85 + 'px',height:'30px',width:'85px'});
				view.draw([
					{tag:'rect',rectStyles:{color:'#C9C9C9',radius:'15px'},position:{top:'0',left:'0',width:'85px',height:'30px'}},
					{tag:'rect',rectStyles:{color:'rgba(255,255,255,1)',radius:'14px'},position:{top:'1px',left:'1px',width:'83px',height:'28px'}},
					{tag:'img',src:'/static/icon/webgengduo.png',position:{top:'12px',left:'11px',width:'20px',height:'6px'}},
					{tag:'rect',rectStyles:{color:'#C9C9C9'},position:{top:'4px',left:'42px',width:'1px',height:'22px'}},
					{tag:'img',src:'/static/icon/webfanhui.png',position:{top:'6px',left:'55px',width:'18px',height:'18px'}},
				]);
				view.show();
				 
				view.addEventListener("click", this.onClick, false);
			},
			onClick(e){
				if(e.clientX < 42){
					nvMask.show()
					nvImageMenu.show() //5+应支持从底部向上弹出的动画
				}else if(e.clientX > 42){
					this.$Router.back()
				}
			}
		}
	};
</script>
<style scoped lang="scss">
</style>